<template>
  <div :style='{ "color": "#3B3E40", "padding": "30px 30px 30px", "fontSize": "14px" }'>
    <el-form
      :style='{ "border": "1px solid #e3e3e3", "padding": "30px 30px 20px", "borderRadius": "8px", "alignItems": "flex-start", "flexWrap": "wrap", "background": "rgba(255,255,255,1)", "display": "flex", "fontSize": "inherit" }'
      class="add-update-preview" ref="ruleForm" :model="ruleForm" label-width="150px">
      <el-row>
        <el-form-item
          :style='{ "border": "0px solid #eee", "padding": "20px 0", "margin": "0 0 2px 0", "color": "inherit", "borderRadius": "0px", "background": "none", "width": "48%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="用户账号" prop="yonghuzhanghao">
          <el-input v-model="ruleForm.yonghuzhanghao" readonly placeholder="用户账号" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "border": "0px solid #eee", "padding": "20px 0", "margin": "0 0 2px 0", "color": "inherit", "borderRadius": "0px", "background": "none", "width": "48%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="头像" prop="touxiang">
          <file-upload tip="点击上传头像" action="file/upload" :limit="1" :multiple="true"
            :fileUrls="ruleForm.touxiang ? ruleForm.touxiang : ''" @change="yonghutouxiangUploadChange"></file-upload>
        </el-form-item>
        <el-form-item
          :style='{ "border": "0px solid #eee", "padding": "20px 0", "margin": "0 0 2px 0", "color": "inherit", "borderRadius": "0px", "background": "none", "width": "48%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="用户姓名" prop="yonghuxingming">
          <el-input v-model="ruleForm.yonghuxingming" placeholder="用户姓名" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "border": "0px solid #eee", "padding": "20px 0", "margin": "0 0 2px 0", "color": "inherit", "borderRadius": "0px", "background": "none", "width": "48%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="性别" prop="xingbie">
          <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
            <el-option v-for="(item, index) in yonghuxingbieOptions" v-bind:key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :style='{ "border": "0px solid #eee", "padding": "20px 0", "margin": "0 0 2px 0", "color": "inherit", "borderRadius": "0px", "background": "none", "width": "48%", "fontSize": "inherit" }'
          v-if="flag == 'yonghu'" label="手机号码" prop="shoujihaoma">
          <el-input v-model="ruleForm.shoujihaoma" placeholder="手机号码" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "border": "0px solid #eee", "padding": "20px 0", "margin": "0 0 2px 0", "color": "inherit", "borderRadius": "0px", "background": "none", "width": "48%", "fontSize": "inherit" }'
          v-if="flag == 'merchant'" label="商家账号" prop="userName">
          <el-input v-model="ruleForm.userName" readonly placeholder="商家账号" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "border": "0px solid #eee", "padding": "20px 0", "margin": "0 0 2px 0", "color": "inherit", "borderRadius": "0px", "background": "none", "width": "48%", "fontSize": "inherit" }'
          v-if="flag == 'merchant'" label="商家姓名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="商家姓名" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "border": "0px solid #eee", "padding": "20px 0", "margin": "0 0 2px 0", "color": "inherit", "borderRadius": "0px", "background": "none", "width": "48%", "fontSize": "inherit" }'
          v-if="flag == 'merchant'" label="手机" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="手机" clearable></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "border": "0px solid #eee", "padding": "20px 0", "margin": "0 0 2px 0", "color": "inherit", "borderRadius": "0px", "background": "none", "width": "48%", "fontSize": "inherit" }'
          v-if="flag == 'merchant'" label="头像" prop="image">
          <file-upload tip="点击上传头像" action="file/upload" :limit="1" :multiple="true"
            :fileUrls="ruleForm.image ? ruleForm.image : ''" @change="merchanttouxiangUploadChange"></file-upload>
        </el-form-item>
        <el-form-item
          :style='{ "border": "0px solid #eee", "padding": "20px 0", "margin": "0 0 2px 0", "color": "inherit", "borderRadius": "0px", "background": "none", "width": "48%", "fontSize": "inherit" }'
          v-if="flag == 'users'" label="用户名" prop="userName">
          <el-input v-model="ruleForm.userName" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item
          :style='{ "border": "0px solid #eee", "padding": "20px 0", "margin": "0 0 2px 0", "color": "inherit", "borderRadius": "0px", "background": "none", "width": "48%", "fontSize": "inherit" }'
          v-if="flag == 'users'" label="头像" prop="image">
          <file-upload tip="点击上传头像" action="file/upload" :limit="1" :multiple="false"
            :fileUrls="ruleForm.image ? ruleForm.image : ''" @change="usersimageUploadChange"></file-upload>
        </el-form-item>
        <el-form-item
          :style='{ "padding": "10px 0 20px", "boxShadow": "0 1px 1px rgba(0,0,0,0.1)", "margin": "30px 0", "alignItems": "center", "textAlign": "center", "background": "linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(240,243,244,.5) 100%)", "display": "flex", "width": "100%", "perspective": "320px", "-webkitPerspective": "320px", "fontSize": "48px", "justifyContent": "flex-start" }'>
          <el-button class="btn3"
            :style='{ "border": "1px solid #0f70ad", "cursor": "pointer", "padding": "0 20px", "boxShadow": "inset 0 1px 0 rgba(255, 255, 255, 0.2)", "margin": "0px 10px", "color": "#fff", "minWidth": "78px", "transition": "all 0.5s", "borderRadius": "3px", "background": "linear-gradient(to bottom, #208ed3 0%,#0272bd 100%)", "width": "auto", "fontSize": "14px", "lineHeight": "24px", "textShadow": "1px 1px 0 rgba(0, 0, 0, 0.2)", "height": "32px" }'
            type="primary" @click="onUpdateHandler">
            <span class="icon iconfont icon-tijiao16"
              :style='{ "margin": "0 2px", "fontSize": "18px", "color": "inherit", "display": "none" }'></span>
            保存
          </el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber, isIntNumer, isEmail, isMobile, isPhone, isURL, checkIdCard } from "@/utils/validate";

export default {
  data() {
    return {
      ruleForm: {},
      flag: '',
      usersFlag: false,
      yonghuxingbieOptions: [],
      merchantxingbieOptions: [],
    };
  },
  mounted() {
    var table = this.$storage.get("sessionTable");
    this.flag = table;
    this.$http({
      url: `${this.$storage.get("sessionTable")}/session`,
      method: "get"
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.ruleForm = data.data;
      } else {
        this.$message.error(data.msg);
      }
    });
    this.yonghuxingbieOptions = "男,女".split(',')
    this.merchantxingbieOptions = "男,女".split(',')
  },
  methods: {
    yonghutouxiangUploadChange(fileUrls) {
      console.log(fileUrls)
      this.ruleForm.touxiang = fileUrls;
    },
    merchanttouxiangUploadChange(fileUrls) {
      console.log(fileUrls)
      this.ruleForm.image = fileUrls;
    },
    usersimageUploadChange(fileUrls) {
      this.ruleForm.image = fileUrls;
    },
    onUpdateHandler() {
      if ((!this.ruleForm.yonghuzhanghao) && 'yonghu' == this.flag) {
        this.$message.error('用户账号不能为空');
        return
      }


      if ((!this.ruleForm.mima) && 'yonghu' == this.flag) {
        this.$message.error('密码不能为空');
        return
      }




      if (this.ruleForm.touxiang != null) {
        this.ruleForm.touxiang = this.ruleForm.touxiang.replace(new RegExp(this.$base.url, "g"), "");
      }
      if ((!this.ruleForm.yonghuxingming) && 'yonghu' == this.flag) {
        this.$message.error('用户姓名不能为空');
        return
      }






      if ('yonghu' == this.flag && this.ruleForm.shoujihaoma && (!isMobile(this.ruleForm.shoujihaoma))) {
        this.$message.error(`手机号码应输入手机格式`);
        return
      }


      if ('yonghu' == this.flag && this.ruleForm.money && (!isNumber(this.ruleForm.money))) {
        this.$message.error(`余额应输入数字`);
        return
      }
      if ((!this.ruleForm.userName) && 'merchant' == this.flag) {
        this.$message.error('商家账号不能为空');
        return
      }


      if ((!this.ruleForm.name) && 'merchant' == this.flag) {
        this.$message.error('商家姓名不能为空');
        return
      }


      if ('merchant' == this.flag && this.ruleForm.shouji && (!isMobile(this.ruleForm.shouji))) {
        this.$message.error(`手机应输入手机格式`);
        return
      }


      if (this.ruleForm.touxiang != null) {
        this.ruleForm.touxiang = this.ruleForm.touxiang.replace(new RegExp(this.$base.url, "g"), "");
      }


      if ('merchant' == this.flag && this.ruleForm.money && (!isNumber(this.ruleForm.money))) {
        this.$message.error(`余额应输入数字`);
        return
      }
      if ('users' == this.flag && this.ruleForm.userName.trim().length < 1) {
        this.$message.error(`用户名不能为空`);
        return
      }
      if (this.flag == 'users') {
        this.ruleForm.image = this.ruleForm.image.replace(new RegExp(this.$base.url, "g"), "")
      }
      this.$http({
        url: `${this.$storage.get("sessionTable")}/update`,
        method: this.flag == 'merchant' ? 'put' : 'post',
        data: this.ruleForm
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "修改信息成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              if (this.flag == 'users') {
                this.$storage.set('headportrait', this.ruleForm.image)
              }
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-date-editor.el-input {
  width: auto;
}

.add-update-preview .el-form-item /deep/ .el-form-item__label {
  padding: 0 10px 0 0;
  color: #333;
  font-weight: 500;
  display: inline-block;
  width: 150px;
  font-size: inherit;
  line-height: 40px;
  text-align: right;
}

.add-update-preview .el-form-item /deep/ .el-form-item__content {
  margin-left: 150px;
}

.add-update-preview .el-input /deep/ .el-input__inner {
  padding: 0 12px;
  color: inherit;
  font-size: 14px;
  border-color: #e3e3e3;
  border-radius: 3px;
  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
  outline: none;
  background: none;
  width: auto;
  border-width: 1px;
  border-style: solid;
  min-width: 350px;
  height: 39px;
}

.add-update-preview .el-select /deep/ .el-input__inner {
  border-radius: 3px;
  padding: 0 10px;
  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
  color: inherit;
  background: none;
  width: auto;
  font-size: 14px;
  border-color: #e3e3e3;
  border-width: 1px;
  border-style: solid;
  min-width: 350px;
  height: 39px;
}

.add-update-preview .el-date-editor /deep/ .el-input__inner {
  border-radius: 3px;
  padding: 0 10px 0 30px;
  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
  color: inherit;
  background: none;
  width: auto;
  font-size: 14px;
  border-color: #e3e3e3;
  border-width: 1px;
  border-style: solid;
  min-width: 350px;
  height: 39px;
}

.add-update-preview /deep/ .el-upload--picture-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  line-height: initial;
  vertical-align: middle;
}

.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
  cursor: pointer;
  color: #bbb;
  object-fit: cover;
  font-size: 24px;
  border-color: #e3e3e3;
  line-height: 60px;
  border-radius: 3px;
  background: none;
  width: auto;
  border-width: 1px;
  border-style: solid;
  text-align: center;
  min-width: 150px;
  height: 60px;
}

.add-update-preview /deep/ .el-upload .el-icon-plus {
  cursor: pointer;
  color: #bbb;
  object-fit: cover;
  font-size: 24px;
  border-color: #e3e3e3;
  line-height: 60px;
  border-radius: 3px;
  background: none;
  width: auto;
  border-width: 1px;
  border-style: solid;
  text-align: center;
  min-width: 150px;
  height: 60px;
}

.add-update-preview .el-textarea /deep/ .el-textarea__inner {
  border-radius: 3px;
  padding: 12px;
  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
  color: inherit;
  background: none;
  width: auto;
  font-size: 14px;
  border-color: #e3e3e3;
  border-width: 1px;
  border-style: solid;
  min-width: 400px;
  height: auto;
}

.add-update-preview .btn3 {
  border: 1px solid #0f70ad;
  cursor: pointer;
  padding: 0 20px;
  margin: 0px 10px;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  transition: all 0.5s;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  background: linear-gradient(to bottom, #208ed3 0%, #0272bd 100%);
  width: auto;
  min-width: 78px;
  height: 32px;
}

.add-update-preview .btn3:hover {
  transform: translate3d(-10px, 0px, 0px);
}

.editor>.avatar-uploader {
  line-height: 0;
  height: 0;
}
</style>
